<template>
    <div class="w100p box_shadow_04 bgfff media_mb20">
        <div class="w100p disflex pl16 pr21 jusbet pt4 lh53 bbeee">
            <span class="postionre c333 fs20">
                <i v-html="datas.name"></i>
                <i class="now"></i>
            </span>
            <span class="fs12 c999 curpointer hoverred" @click="changerouter(0,'more')">更多></span>
        </div>
        <div class="w100p pt20 pb47 disflex jusbet pl16 pr21">
            <!--banner-->
            <el-carousel trigger="click" :autoplay="false" arrow="always" class="w37_5 chil_h100p news_banner media_w100p media_mb20">
                <el-carousel-item v-for="(item,k) in datas.banners" :key="k">
                    <a :href="item.slide_url" target="_blank" class="w100p h100p disblock" :title="item.slide_name">
                        <img :src="item.slide_pic" alt="" class="w100p h100p disblock">
                    </a>
                </el-carousel-item>
            </el-carousel>
            <ul class="news_right media_w100p minh260">
                <li class="news_right_li clearfix bbeee pt22 pb10 curpointer"
                    v-for="(v,k) in datas.datas"
                    :key="k"
                    @click="changerouter(v.id,'single')">
                    <div class="number fs20 fl w38 h38 bgaaa cfff textc lh38" >0{{k+1}}</div>
                    <div class="pl45">
                        <p class="overell fs14 c333 lh20 title" v-html="v.post_title" :title="v.post_title"></p>
                        <div class="disflex jusbet">
                            <span v-html="v.post_modified" class="fs12 c999"></span>
                            <div class="fs12 c999">
                                <span class="pr21"  @click.stop="expectedTrend(1,v.id)" title="看涨">
                                    <b class="iconfont icon-zhang cred fs14"></b>
                                    <b v-html="v.up" ></b>
                                </span>
                                <span class="pr21"  @click.stop="expectedTrend(2,v.id)" title="看跌">
                                    <b class="iconfont icon-die cgreen fs12"></b>
                                    <b v-html="v.down"></b>
                                </span>
                                <span  @click.stop="expectedTrend(3,v.id)" title="看平">
                                    <b class="iconfont icon-icon18 c666 fs12"></b>
                                    <b v-html="v.flat"></b>
                                </span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "News",
        props:['datas'],
        data(){
            return{

            }
        },
        methods:{
            changerouter(singleid,action){//内容id
                this.$emit('changerouter',this.datas.parent,this.datas.term_id,singleid,action,1)
            },
            expectedTrend(status,id){ // 1--看涨 2 -- 看跌
                var v =this;
                this.$ExpectedTrends(status,id,function () {
                    v.$emit('refresh');
                });
            }
        }
    }
</script>

<style>
    .chil_h100p .el-carousel__container{
        height: 100%;
    }
    .news_banner .el-carousel__arrow{
        width: .5rem;
        height: .5rem;
        background: #000;
        line-height: .55rem;
    }
    .news_banner .el-carousel__arrow i{
        font-size: .2rem;
    }
    .news_banner .el-carousel__arrow--right{
        right: -.25rem;
        text-align: left;
        padding-left: .05rem;
    }
    .news_banner .el-carousel__arrow--left{
        left: -.25rem;
        text-align: left;
        padding-left: .25rem;
    }
    .news_banner .el-carousel__button{
        width: .08rem;
        height: .08rem;
        border-radius: 50%;
    }
    .news_banner .el-carousel__indicator{
        padding: 0 .025rem;
    }
    .news_banner .el-carousel__indicators{
        left: .32rem;
    }
    .news_right{
        /*width: 40.8%;*/
        width: 59.8%;
    }
    .news_right_li:hover .number{
        background: #bf000e;
    }
    .news_right_li:hover .title{
        color: #bf000e;
    }
    .news_right .news_right_li:first-child{
        padding-top: .04rem;
    }
</style>

























